<!-- 选择新增的流程 -->
<template>
	<el-dialog
		v-model="state.dialogVisible"
		title="合同账单明细"
		center
		width="60%"
		:before-close="handleClose"
	>
		<div class="basicBox">
			<div class="basiItme">
				<div class="itemLable">合同总金额</div>
				<div class="itemContent">{{ state.total }}</div>
			</div>
			<div class="basiItme">
				<div class="itemLable">已结清总金额</div>
				<div class="itemContent">{{ state.paid }}</div>
			</div>
			<div class="basiItme">
				<div class="itemLable">剩余未结清总金额</div>
				<div class="itemContent">{{ state.total - state.paid }}</div>
			</div>
		</div>

		<public-table
			class="m-t20"
			:index="true"
			border
			:tableData="state.tableData"
			:page="page"
			:isPaging="false"
			:tableOption.sync="state.tableOption"
		>
			<template #operation="scope">
				<el-button
					size="small"
					class="button_view"
					@click="topath(scope.row)"
					type="primary"
					>查看资金支付审批单</el-button
				>
			</template>
			<template #status="scope">
				<span v-if="scope.row.status == -1">未支付</span>
				<span v-if="scope.row.status == 1">已支付</span>
			</template>
		</public-table>

		<template #footer>
			<span class="dialog-footer">
				<!-- <el-button type="primary"  @click="state.dialogVisible = false">
					提交
				</el-button> -->
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import { ref, reactive, watch, computed } from "vue";
import PublicTable from "@/components/PublicTable";
import { contractApi } from "@/api/biddingProject";
import { ElDialog, ElForm } from "element-plus";

const state = reactive({
	tableOption: [
		{ label: "状态", prop: "status", slot: true, minWidth: 80 },
		{ label: "结算开始日期 ", prop: "settlementStartTime", minWidth: 120 },
		{ label: "结算结束日期", prop: "settlementEndTime", minWidth: 120 },
		{ label: "应收金额", prop: "payableAmount", minWidth: 100 },
		{ label: "实收金额", prop: "paidAmount", minWidth: 100 },
		{ label: "申请付款日期", prop: "applyPayTime", minWidth: 120 },
		{ label: "资金支付审批单编号", prop: "payId", minWidth: 180 },
		{ label: "审批通过日期", prop: "auditPassTime", minWidth: 120 },
		{ label: "操作", prop: "operation", slot: true, width: 200 },
	],
	tableData: [],
	dialogVisible: false,
	total: "",
	paid: "",
});
const page = reactive({
	total: 0,
	current: 1,
	size: 50,
});

const emits = defineEmits([""]);
const updata = (row) => {
	emits("updataAddProcess", row);
	handleClose();
};
const getBill = (id) => {
	contractApi.getBill(id).then((res) => {
		if (res.code == 200) {
			state.tableData = res.data.paidList;
			state.paid = res.data.paid;
			state.total = res.data.total;
		}
	});
};

const handleClose = () => {
	state.dialogVisible = false;
};
const topath = (row) => {
	window.open(row.oaPayLink);
};

// 开启弹窗
const open = (id) => {
	getBill(id);
	state.dialogVisible = true;
};

defineExpose({ open });
</script>

<style lang="scss" scoped>
:deep(.table-content) {
	max-height: 500px;
	overflow: auto;
}

.basicBox {
	display: flex;
	width: 100%;
	.basiItme {
		display: flex;
		flex: 1;
	}

	.itemLable {
		font-size: 14px;

		font-weight: 500;
		color: #1a1a1a;
		line-height: 40px;
		width: 120px;
		text-align: right;
	}

	.itemContent {
		min-width: 200px;
		height: 40px;
		line-height: 40px;
		background: #f7f7fa;
		border-radius: 4px;
		padding: 0 20px;
		margin-left: 10px;
	}
}
</style>
